<template>
  <div class="app-container">
        <el-row :gutter="20">
      <!--合同数据-->
      <el-col :span="24"
              :xs="24">
        <!-- <el-form :model="queryParams"
                 ref="queryForm"
                 size="small"
                 :inline="true"
                 v-show="showSearch"
                 label-width="68px">

          <el-form-item label="合同编号"
                        prop="contractNo">
            <el-input v-model="queryParams.contractNo"
                      placeholder="请输入合同编号"
                      clearable
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       icon="el-icon-search"
                       size="mini"
                       @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh"
                       size="mini"
                       @click="resetQuery">重置</el-button>
          </el-form-item>

          <el-form-item>
            <el-col :span="1.5">
              <el-button type="primary"
                         plain
                         icon="el-icon-plus"
                         size="mini"
                         @click="handleCase">批量立案</el-button>
            </el-col>
          </el-form-item>

        </el-form> -->

    <!-- private Integer caseId;
    /**官文信息类型(字典)*/
    private String officalInformationTypeId;
    /**官文公文信息*/
    private String officalInformationDocument; -->
        <el-table :data="officialInfoList"
                  @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection"
                           width="50"
                           align="center" /> -->
          <el-table-column label="业务编号"
                           align="center"
                           prop="caseNo"
                           v-if="columns[0].visible">
            <!-- <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         icon="el-icon-view"
                         @click="handleDetails(scope.row)">{{scope.row.caseId}}</el-button>
            </template> -->
          </el-table-column>
          <el-table-column label="官文类型"
                           align="center"
                           prop="officalInformationTypeId"
                           v-if="columns[1].visible"
                           :formatter="formatInformationType"
                           :show-overflow-tooltip="true" />
          <el-table-column label="官文内容"
                           align="center"
                           prop="officalInformationDocument"
                           :formatter="formatPatentType"
                           v-if="columns[2].visible"
                           :show-overflow-tooltip="true" />

          <!-- <el-table-column label="操作"
                           align="center"
                           width="160"
                           class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         icon="el-icon-notebook-2"
                         @click="handleCase(scope.row)">立案</el-button>
            </template>
          </el-table-column> -->
                    
        </el-table>
        <pagination v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="officalInfoList" />
      </el-col>
    </el-row>
    <!-- <h2>专利管理--官文通知-index</h2> -->
    <!-- <el-upload class="upload-demo"
               action="https://aliyun-shelly-oss.oss-cn-chengdu.aliyuncs.com"
               :data="dataObj"
               :headers="headers"
               :before-upload="beforeUpload"
               :on-success="handleUploadSuccess"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :file-list="fileList"
               list-type="picture">
      <el-button size="small"
                 type="primary">点击上传</el-button>
      <div slot="tip"
           class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload> -->

    <!-- 上传图片 -->
    <!-- <h2>上传图片并回显</h2>
    <el-upload class="avatar-uploader"
               action="http://oss-cn-chengdu.aliyuncs.com"
               v-model="Addfrom.url"
               :http-request="_uploadImg"
               :multiple=true
               :before-upload="handleBeforeUpload"
               :limit="8">
      <img v-if="Addfrom.url"
           :src="Addfrom.url"
           :width="50"
           :height="50"
           class="avatar">
      <i v-else
         class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <hr> -->
    <!-- 上传文件 -->
    <!-- <h2>上传文件</h2>
    <el-upload class="avatar-uploader"
               action="http://oss-cn-chengdu.aliyuncs.com"
               v-model="Addfrom.url"
               :http-request="_uploadFile"
               :multiple=true
               :before-upload="handleBeforeUpload"
               :limit="8">
      <img v-if="1==2"
           :src="Addfrom.url"
           :width="50"
           :height="50"
           class="avatar">
      <i v-else
         class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload> -->

  </div>
</template>

<script>
import {
  addOfficalInfo,
  findOneOfficalInfo,
  findOfficalInfoList,
  findOfficalInfoDtoList,
  modifyOfficalInfo,
  removeOfficalInfo,
  sendEmail,
  addCaseHistory, //新增案件历史
  findCaseHistoryList, //案件历史列表
  getOssSign, //获取oss签名
} from '@/api/patent/ican'

// @iCAN Vue直传OSS文件
import {uploadFile,uploadImg } from '@/api/patent/alioss'

export default {
    dicts: [
    //专利类型字典
    'ipms_information_type',
  ],
  //数据
  data() {
    return {
      //分页参数
      pageParams: {
        pageNum: 1,
        pageSize: 20,
      },

      // 官文通知
      officialObj: {
        officalInformationId: null,
        caseId: null,
        officalInformationTypeId: null,
        officalInformationDocument: null,
      },

      //案件历史
      historyObj: {
        caseHistoryId: null,
        caseId: null,
        caseHistoryStatusId: null,
      },

      //vue oss直传第一版
      url: '',
      fileList1: [],
      dataObj: {
        //提交到OSS的参数
        policy: '',
        signature: '',
        key: '',
        accessKeyId: '',
        ossAccessKeyId: '',
        dir: '',
        host: '',
      },
      headers: {
        // Authorization: "Bearer " + getToken(),
        ossAccessKeyId: '',
        accessKeyId: '',
      },

      //vue oss直传第二版
      fileList: [],
      Addfrom: {
        url: '',
      },

      //显示官文
      officialInfoList:[],
      // 选中数组
      Nos: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 合同表格数据
      contractList: [],
      // 显示搜索条件
      showSearch: true,
      // 表单参数
      // form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractNo: undefined,
      },
      // 列信息
      columns: [
        { key: 0, visible: true },
        { key: 1, visible: true },
        { key: 2, visible: true },
        { key: 3, visible: true },
        { key: 4, visible: true },
      ],
    }
  },

  //钩子
  created() {

    // 官文通知crud
    // this.insertOfficalInfo();
    // this.findOne();
    
    this.officalInfoList();
    // this.modifyOne()
    // this.removeOne();

    // 邮件
    // sendEmail().then((resp)=>{
    //   console.log(resp);
    // })

    //案件历史  -- 新增
    // this.historyObj.caseId = 1
    // this.historyObj.caseHistoryStatusId = '3'
    // addCaseHistory(this.historyObj).then((resp) => {
    //   console.log(resp)
    // })

    //案件历史  -- 根据案件id查询列表
    // findCaseHistoryList(1).then((resp) => {
    //   console.log(resp)
    // })
  },

  //方法
  methods: {
    
    //字典翻译
    formatInformationType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_information_type,
        row.officalInformationTypeId
      )
    },
    //新增官文
    insertOfficalInfo() {
      this.officialObj.caseId = 666
      this.officialObj.officalInformationTypeId = 1
      this.officialObj.officalInformationDocument = '我是新增的官文'
      addOfficalInfo(this.officialObj).then((resp) => {
        console.log(resp)
      })
    },
    //单个查找
    findOne() {
      findOneOfficalInfo(20).then((resp) => {
        console.log(resp)
      })
    },
    //获取官文列表分页
    officalInfoList() {
      this.loading = true
      findOfficalInfoDtoList(this.queryParams, 0).then((resp) => {
         console.log("------------total = ",this.total);
        console.log(resp)
        this.loading = false
        this.officialInfoList = resp.rows;
        this.total = resp.total;
       
      })
    },
    //更新官文
    modifyOne() {
      this.officialObj.officalInformationId = 20
      this.officialObj.officalInformationDocument = '123修改修改我是新增的官文'

      modifyOfficalInfo(this.officialObj).then((resp) => {
        console.log(resp)
      })
    },
    //删除官文
    removeOne() {
      removeOfficalInfo(20).then((resp) => {
        console.log(resp)
      })
    },

    //OSS上传文件相关
    handleRemove(file, fileList) {},
    handlePreview(file, fileList) {},
    beforeUpload(file) {
      let $this = this
      //请求服务器签名
      getOssSign().then((response) => {
        console.log(response)

        //设置相关的参数
        $this.dataObj.policy = response.data.policy
        $this.dataObj.signature = response.data.signature
        $this.dataObj.accessKeyId = response.data.accessid
        $this.dataObj.ossAccessKeyId = response.data.accessid

        $this.headers.ossAccessKeyId = response.data.accessid
        $this.headers.accessKeyId = response.data.accessid

        //上传的文件名，使用UUID处理一下
        $this.dataObj.key = response.data.dir + '/' + '_${filename}'
        $this.dataObj.dir = response.data.dir
        $this.dataObj.host = response.data.host

        console.log(this.dataObj)
      })
      // axios
      //   .get('/ossSign')
      //   .then(function (response) {
      //     //设置相关的参数
      //     $this.dataObj.policy = response.data.policy
      //     $this.dataObj.signature = response.data.signature
      //     $this.dataObj.ossaccessKeyId = response.data.accessid
      //     //上传的文件名，使用UUID处理一下
      //     $this.dataObj.key =response.data.dir + '/' + getUUID() + '_${filename}'
      //     $this.dataObj.dir = response.data.dir
      //     $this.dataObj.host = response.data.host
      //   })
      //   .catch(function (error) {
      //     console.log(error)
      //   })
    },
    handleUploadSuccess(res, file) {
      this.fileList.pop()
      //上传的完整的文件地址
      var urlPath =
        this.dataObj.host +
        '/' +
        this.dataObj.key.replace('${filename}', file.name)
      this.url = urlPath
    },
    
    //第二版上传文件之前
    handleBeforeUpload(file) {
      const isJPEG = file.name.split('.')[1] === 'jpeg'
      const isJPG = file.name.split('.')[1] === 'jpg'
      const isPNG = file.name.split('.')[1] === 'png'
      const isWEBP = file.name.split('.')[1] === 'webp'
      const isGIF = file.name.split('.')[1] === 'gif'
      const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4
      if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        //this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!')
      }
      if (!isLt500K) {
        // this.$message.error('单张图片大小不能超过 4mb!')
      }
      // return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K
      return true
    },
    
    //上传图片
    _uploadImg(file) {
      uploadImg(file.file).then((resp)=>{
        this.Addfrom.url = resp;
        console.log("图片地址：",resp);
      })
    },

    //上传文件
    _uploadFile(file) {
      // then抓alioss.js的Promise resolve  => async wait
      uploadFile(file.file).then((resp) => {
        console.log("文件地址：",resp);
      })
    },
  },
}
</script>

<style lang="stylus" scoped></style>